<template>
    <div class="authorize-container">
        <div class="left"><img :src="user.avatar" alt="" /></div>

        <div class="right">
            <div class="top">
                <span class="nick">{{ user.nickname }}</span> <span class="id">ID:{{ user.uid }}</span>
            </div>
            <div class="bottom">
                <!--开通小号-->
                <p v-if="openType == 'opened'">开通时间:{{ user.created }}</p>

                <!--开通vip-->
                <p v-else>当前身份:{{ user.role }}</p>

                <!--按钮类型-->
                <div class="authorize-btn" v-if="user.canchange" @click.stop="onClickBtn">{{ btnText }}</div>
            </div>
        </div>
    </div>
</template>

<script>
const btnTextMap = {
    sub: {
        opened: '解除绑定',
        toOpen: '确定绑定'
    },
    vip: {
        opened: '',
        toOpen: '授权vip'
    },
    top: {
        opened: '',
        toOpen: '授权总代'
    }
};

export default {
    name: 'user-card',
    data() {
        return {};
    },
    props: {
        type: {
            type: String,
            default: 'sub',
            isRequired: true
        },
        openType: {
            type: String,
            default: 'opened',
            isRequired: true
        },
        user: {
            type: Object,
            isRequired: true
        }
    },
    computed: {
        btnText() {
            return btnTextMap[this.type][this.openType] || btnTextMap['sub']['opened'];
        }
    },
    created() {},
    mounted() {},
    methods: {
        onClickBtn() {
            this.$emit('clickBtn', this.user.uid);
        }
    },
    watch: {},
    components: {}
};
</script>

<style lang="stylus" scoped>
@import '~assets/main.styl'

*{
    box-sizing border-box
}

.authorize-container {
    position: relative
    width: 100vw
    height vh(92)
    padding vh(8) cellPadding
    margin-bottom smallMargin
    background grayF
    flex-x(space-between,flex-start)
    .left {
        /*height vh(40)*/
        flex 0
        margin-right smallMargin
        flex-x()
        img{
            width vw(40)
            height vw(40)
        }
    }

    .right {
        height vh(76)
        flex 1 0 auto
        flex-y(space-between,flex-start)
        .top{
            position relative
            width 100%
            height vh(38)
            flex-x()
            .nick{
                word-vw(word12,gray3)
                line-height vh(16)
            }
            .id{
                word-vw(word12,gray9)
                line-height vh(16)
            }
            &:after {
                position absolute
                top vh(38)
                left vw(10)
                right auto
                width vw(275)
                height 1px
                background #f9f9f9
                content ' '
            }
        }

        .bottom{
            width 100%
            height vh(38)
            flex-x()
            p{
                word-vw(word12,gray3)
            }
            .authorize-btn{
                small-hollow()
                width vw(62)
                height vh(24)
                line-height vh(24)
                font-size word12
            }
        }

    }
}
</style>
